<template>
    <div class="joincom" style="margin-left: 35%;width: 90vw">
        <el-form label-position="top" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品名称：">
                <el-select v-model="joinProduct.commodityid" filterable placeholder="请选择"
                           @change="getlabel">
                    <el-option
                            v-for="item in product"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="进货单价：">
                <el-input placeholder="单位/元" v-model="joinProduct.joinprice"></el-input>
            </el-form-item>
            <el-form-item label="售卖单价：">
                <el-input placeholder="单位/元" v-model="sto.price"></el-input>
            </el-form-item>
            <el-form-item label="进货数量：">
                <el-input v-model="joinProduct.number"></el-input>
            </el-form-item>
            <el-form-item>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-button type="primary" @click="insertSale()">提交</el-button>
                    </el-col>
                    <el-col :span="6" :offset="1"><a href="javascript:;"
                                                     @click="$router.push({path:'/product/Addcom'})">添加新商品</a></el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Joincom",
        data() {
            return {
                product: [
                    {
                        id: '1',
                        name: '2233'
                    },
                    {
                        id: '2',
                        name: 'miku'
                    }
                ],
                joinProduct: {
                    storeid: '',
                    commodityid: '',
                    number: '',
                    joinprice: ''
                },
                sto: {
                    storeid: '',
                    managerid: '',
                    commodityname: '',
                    stock: '',
                    joinprice: '',
                    price: '',
                    joinstocked: ''
                }
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                //在此处vm表示vue组件对象
                vm.loadDataJ();
            });

        },
        methods: {
            insertSale: function () {
                this.joinProduct.storeid = 1;

                var d1 = 0;
                var d2 = 0;
                this.axios.post("/insertJoin", this.joinProduct)
                    .then((response) => {
                        d1 = response.data;
                    })
                this.sto.storeid = 1;
                this.sto.managerid = 1;
                this.sto.stock = this.joinProduct.number;
                this.sto.joinprice = this.joinProduct.joinprice;
                this.sto.joinstocked = 0;

                this.axios.post("/insStocked", this.sto)
                    .then((response) => {
                        d2 = response.data;
                    })

                setTimeout(() => {
                    if (d1 == 1 && d2 == 1) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.joinProduct.commodityid = '请选择';
                        this.joinProduct.joinprice = "";
                        this.joinProduct.number = '';
                        this.sto.price = '';
                    } else {
                        this.$message.error('添加失败');
                    }
                }, 2000);
            },
            loadDataJ: function () {
                this.axios.get("/getAllCom", {
                    params: {
                        storeid: 1
                    }
                })
                    .then((response) => {
                        this.product = response.data;
                    })
            },
            getlabel: function () {
                // let obj = {};
                // obj = this.product.find((item) => {
                //     return item.value === val;
                // }); //判断是否有选择，如果用户没有选择，但是删除了上一个选择内容，避免控制台报错，需要做一个判断
                // if (obj != "" && obj != undefined) {
                //     this.sto.commodityname = obj.label;//获取label的值
                // }
                // alert(this.joinProduct.commodityid)
                // alert(this.product.id.find(this.joinProduct.commodityid).name)
                var p = this.product.find(item => {
                    return item.id == this.joinProduct.commodityid;
                })
                this.sto.commodityname = p.name;
            },
        }
    }
</script>

<style scoped>
    .el-input {
        width: 40%;
    }

    .el-select {
        width: 40%;
    }

    .joincom {
        margin-left: 30%;
        margin-top: 5%;
    }
</style>